<template>
  <el-form label-width="80px">
    <el-form-item label="SPU名称"> xxx </el-form-item>
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请输入SKU名称"
        v-model="skuParams.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        placeholder="价格(元)"
        type="number"
        v-model="skuParams.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(千克)">
      <el-input
        placeholder="重量(千克)"
        type="number"
        v-model="skuParams.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="规格描述">
      <el-input
        placeholder="规格描述"
        type="textarea"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <!-- 平台属性 -->
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item
          :label="attr.attrName"
          v-for="(attr, index) in attrArr"
          :key="attr.id"
        >
          <el-select v-model="attr.attrIdAndValueId">
            <el-option
              :label="item.valueName"
              :value="`${attr.id}:${item.id}`"
              v-for="(item, index) in attr.attrValueList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <!-- 行内from -->
      <el-form :inline="true">
        <el-form-item
          :label="saleAttr.saleAttrName"
          v-for="(saleAttr, index) in saleArr"
          :key="saleAttr.id"
        >
          <el-select v-model="saleAttr.saleAttrIdAndValueId">
            <el-option
              :label="item.saleAttrValueName"
              :value="`${saleAttr.id}:${item.id}`"
              v-for="(item, index) in saleAttr.spuSaleAttrValueList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="imgArr" ref="tableRef">
        <el-table-column type="selection" width="80"> </el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img
              :src="row.imgUrl"
              alt="图片加载失败"
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"> </el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button type="primary" size="small" v-if="row.isChecked==1">默认</el-button>
            <el-button type="info" size="small" e-else @click="changeChecked(row)">设置默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="save">保存</el-button>
      <el-button
        size="default"
        @click="cancel"
        >取消</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {
  reqAttrList,
  reqSpuHasSaleAttr,
  reqImgList,
  reqAddSku,
} from "../../../api/product/spu/spu";
import {ElMessage} from 'element-plus';
import { ref } from "vue";
//存储平台属性
let attrArr = ref([]);
//销售属性
let saleArr = ref([]);
//照片墙
let imgArr = ref([]);
//table组件
let tableRef=ref();

//收集添加sku参数
let skuParams = ref<any>({
  category3Id: 0,
  spuId: 0,
  tmId: 0,

  skuName: "",
  price: 0,
  weight: "",
  skuDesc: "",

  skuDefaultImg: "",
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});

const initSku = async (
  c1Id: string | number,
  c2Id: string | number,
  spu: any
) => {
  skuParams.value.category3Id = spu.category3Id;
  skuParams.value.spuId = spu.id;
  skuParams.value.tmId = spu.tmId;

  //平台属性
  let result = await reqAttrList(c1Id, c2Id, spu.category3Id);
  //销售属性
  let result1 = await reqSpuHasSaleAttr(spu.id);
  //照片墙
  let result2 = await reqImgList(spu.id);
  //存储数据平台属性
  attrArr.value = result;

  saleArr.value = result1;

  imgArr.value = result2;

//照片墙
imgArr.value=result2;
if(imgArr.value.length==0)return;
imgArr.value[0].isChecked=1;
setTimeout(()=>{
  tableRef.value.toggleRowSelection(imgArr.value[0],true);
  skuParams.value.skuDefaultImg= imgArr.value[0].imgUrl;
},0);
for(var i=0;i<imgArr.value.length- 1;i++){
  if(i>0){
    imgArr.value[i].isChecked=0;
  }
}
};

//切换checked
const changeChecked=(row)=>{
  imgArr.value.forEach((item)=>{
    item.ischecked=0;
    tableRef.value.toggleRowSelection(item,false);
  });

  row.isChecked = 1;
  tableRef.value.toggleRowSelection(row, true);
  skuParams.value.skuDefaultImg = row.imgUrl;
};

//保存按钮
const save = async () => {
  skuParams.value.skuAttrValueList = attrArr.value.reduce((prev, next) => {
    if (next.attrIdAndValueId) {
      const [attrId, valueId] = next.attrIdAndValueId.split(":");
      prev.push({ attrId, valueId });
    }
    return prev;
  }, []);
  
  skuParams.value.skuSaleAttrValueList = saleArr.value.reduce((prev, next) => {
    if (next.saleAttrIdAndValueId) {
      const [saleAttrId, saleAttrValueId] =
        next.saleAttrIdAndValueId.split(":");
      prev.push({ saleAttrId, saleAttrValueId });
    }
    return prev;
  }, []);
  //发请求//添加SKU
  try {
    await reqAddSku(skuParams.value);
    ElMessage({
      type: "success",
      message: "添加SKU成功",
    });
    emit("changeScene", { scenes: 0, flag: "" });
    resetData();
  } catch (error) {
    ElMessage({
      type: "error",
      message: "添加SKU失败",
    });
  }
};
//重置数据
const resetData = ()=>{
  attrArr.value = [];
  saleArr.value = [];
  imgArr.value = [];
  skuParams.value = {};
}

const cancel = ()=>{
  emit('changeScene',{scenes:0,flag:''});
  resetData();
}

//对外暴露
defineExpose({
  initSku,
});
let emit = defineEmits(["changeScene"]);
</script>

<style scoped>
</style>